import React from "react";
import { View, Text, Image, StyleSheet, Pressable } from "react-native";
import FastImage from "react-native-fast-image";
import LinearGradient from "react-native-linear-gradient";
import { __formatNumber, __getThumbUrl } from "../common/utils";
import { useNavigation } from "@react-navigation/native";

interface PipeListItemProps {
  item: {
    cover: string;
    cartoonAvatar: string;
    cartoonName: string;
    name: string;
    user: {
      avatar: string;
      nickname: string;
    };
    useNum: number;
  };
  itemHeight: number;
}

const PipeListItem: React.FC<PipeListItemProps> = ({ item, itemHeight }) => {
  const navigation = useNavigation();

  return (
    <Pressable
      onPress={() => {
        // @ts-ignore
        navigation.navigate("Profile", { uid: item.user.uid });
      }}
    >
      <View style={[styles.contentView, { height: itemHeight }]}>
        <FastImage
          source={{ uri: __getThumbUrl(item.cover, 500) }}
          style={[styles.coverImage, { height: itemHeight - 70 }]}
        />
        <LinearGradient
          start={{ x: 0, y: 0 }}
          end={{ x: 0, y: 1 }}
          colors={["black", "transparent"]}
          style={styles.gradientView}
        />
        <View style={styles.titleView}>
          <FastImage
            source={{ uri: __getThumbUrl(item.cartoonAvatar, 36) }}
            style={styles.cartoonAvatar}
          />
          <Text style={styles.cartoonName}>{item.cartoonName}</Text>
        </View>
        <Text numberOfLines={1} style={styles.title}>
          {item.name}
        </Text>

        <View style={styles.userView}>
          <FastImage
            source={{ uri: __getThumbUrl(item.user.avatar, 36) }}
            style={styles.userAvatar}
          />
          <Text style={styles.nickname} numberOfLines={1} ellipsizeMode="tail">
            {item.user.nickname}
          </Text>
          <View style={styles.rightView}>
            <Image
              style={{ width: 16, height: 16 }}
              source={require("../../assets/images/icon_pipe_chat.png")}
            />
            <Text style={styles.numberText}>{__formatNumber(item.useNum)}</Text>
          </View>
        </View>
      </View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  contentView: {
    backgroundColor: "white",
    justifyContent: "flex-start",
    marginVertical: 0,
    marginHorizontal: 0,
    borderRadius: 8,
    overflow: "hidden",
  },
  gradientView: {
    position: "absolute",
    width: "100%",
    height: 100,
    backgroundColor: "transparent",
  },
  titleView: {
    marginTop: 5,
    marginLeft: 5,
    position: "absolute",
    flexDirection: "row",
    alignItems: "center",
  },
  cartoonName: {
    marginLeft: 6,
    color: "white",
    fontSize: 15,
  },
  cartoonAvatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: "white",
  },
  title: {
    fontWeight: "bold",
    fontSize: 15,
    marginTop: 8,
    marginLeft: 5,
  },
  userView: {
    marginLeft: 4,
    marginTop: 2,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  userAvatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: "white",
  },
  nickname: {
    color: "rgba(0, 0, 0, 0.54)",
    fontSize: 13,
    marginLeft: 3,
    marginRight: 0,
    flex: 1,
  },
  coverImage: {
    width: "100%",
    resizeMode: "cover",
    borderRadius: 8,
  },
  rightView: {
    marginLeft: 4,
    marginRight: 5,
    flexDirection: "row",
    alignItems: "center",
  },
  numberText: {
    color: "rgba(0, 0, 0, 0.54)",
    marginLeft: 2,
    fontSize: 13,
  },
});

export default PipeListItem;
